<template>
  <div>
    <!--搜索框-->
    <div >
      <el-form style="margin-top: 7px;" :inline="true"  class="demo-form-inline">
        <el-form-item >
          <el-input  style="background-color:transparent;border:5px;" v-model="likeThemename"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="background-color: transparent;font-weight:bold;background-color: Transparent;  color: black"  @click="likeuserByname">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="tableTheme" border style="width: 100%">
        <el-table-column fixed  label="序号" width="100">
          <template slot-scope="scope">{{ scope.$index+1}}</template>
        </el-table-column>
        <el-table-column fixed  label="创建人" width="150">
          <template slot-scope="scope">{{ scope.row.username }}</template>
        </el-table-column>
        <el-table-column label="板块" width="150">
          <template slot-scope="scope">{{ scope.row.platename }}</template>
        </el-table-column>
        <el-table-column  label="帖子主题" width="400">
          <template slot-scope="scope">{{ scope.row.themetitle }}</template>
        </el-table-column>
        <el-table-column  label="创建时间" width="200">
          <template slot-scope="scope">{{ scope.row.themedate }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" >
            <el-button class="idStatus"
                       size="mini"
                       type="text"
                       color="red"
                       @click="deletetheme(scope.$index, scope.row.themeid)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
      <!--分页操作-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5]"
        :page-size="queryInfo.limit"
        layout=" sizes, prev, pager, next, jumper"
        :total="queryInfo.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableTheme: [
          /*{
            classname: '2016-05-03',
            teachername: '王小虎',
            classcontent: '上海',
            classnum: '普陀区',
          },
          {
            classname: '2016-05-03',
            teachername: '王小虎',
            classcontent: '上海',
            classnum: '普陀区',
          },
          {
            classname: '2016-05-03',
            teachername: '王小虎',
            classcontent: '上海',
            classnum: '普陀区',
          },
          {
            classname: '2016-05-03',
            teachername: '王小虎',
            classcontent: '上海',
            classnum: '普陀区',
          },
          {
            classname: '2016-05-03',
            teachername: '王小虎',
            classcontent: '上海',
            classnum: '普陀区',
          },
          {
            classname: '2016-05-03',
            teachername: '王小虎',
            classcontent: '上海',
            classnum: '普陀区',
          },
          {
            classname: '2016-05-03',
            teachername: '王小虎',
            classcontent: '上海',
            classnum: '普陀区',
          },*/
        ],
        queryInfo:{
          query:'',
          //当前页数
          page:'1',
          //每页显示多少条
          limit:'5',
          total:'',
        },
        likeThemename:'',
      }
    },
    created() {
      this.getAll();
    },
    methods: {
      /*模糊查询*/
      likeuserByname(){
        // alert(this.likeThemename);
        if(this.likename1 != '' && this.likename1 != localStorage.getItem("likename")){
          localStorage.removeItem('likename');
          localStorage.setItem('likename',this.likename1);
        }else{
          this.likename1 = localStorage.getItem("likename");
          this.$http
            .get('/theme/liketheme',{params:{likename:this.likeThemename,page:this.queryInfo.page,limit:this.queryInfo.limit}})
            .then(res => {
              if (res.data.statusCode == 200) {
                // alert("查询成功");
                this.tableTheme = res.data.data.list ;
                this.queryInfo.total = res.data.total;
              }
            })
            .catch(error => {
              this.$message(error)
            })
        }

      },
      /*删除班级*/
      deletetheme(index,themeid){
        // alert(themeid);
        this.$http
          .get('/theme/deletetheme',{params:{themeid:themeid}})
          .then(res => {
            if (res.data.statusCode == 200) {
              // alert("查询成功");
              this.getAll();
              this.$message({
                message: '恭喜你，删除成功',
                type: 'success'
              });
            }else{
              this.$message({
                message: '对不起，删除失败',
                type: 'warning'
              });
            }
          })
          .catch(error => {
            this.$message(error)
          })
      },
      /*查询所有班级*/
      getAll() {
        /*查询所有班级信息*/
        // alert("查询所有班级信息");
        this.$http
          .get('/theme/nthemeall', {params: {page: this.queryInfo.page, limit: this.queryInfo.limit}})
          .then(res => {
            if (res.data.statusCode == 200) {
              // alert("查询成功");

              this.tableTheme = res.data.data.list;
              this.queryInfo.total = res.data.total;
              console.log(this.tableTheme);
            }
          })
          .catch(error => {
            this.$message(error)
          })
      },
      /*handleClick(row) {
        console.log(row);
      },*/
      handleSizeChange(newSize) {
        // alert("每页显示条数的更新"+newSize)
        this.queryInfo.limit = newSize
        this.getAll()
        //console.log(newSize)
      },
      handleCurrentChange(newPage) {
        //alert("页码的更新"+newPage)
        this.queryInfo.page = newPage
        this.getAll();
        //console.log(newPage)
      }
    }
  }
</script>
